{% extends 'core/base.html' %}
{% load staticfiles %}

{% block breadcrumb %}
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item">Users</li>
        <li class="breadcrumb-item active">Friends</li>
{% endblock breadcrumb%}

{% block content %}
<div class="container-fluid">
    <div id="ui-view" style="opacity: 1;">
        <div class="animated fadeIn">
            <div class="row">
                <div class="col-12">
                    <div class="social-box" style="height:110%">
                        <div class="card">
                            <div class="card-body">
                                <img src="{{ logged_user.img.url }}" class="img-avatar m-4" alt="{{ user }}" width="20%">
                                <br>
                                <form action="" method="POST" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <div class="custom-file col-md-4">
                                        {{ img_form.img }}
                                        <label class="custom-file-label btn-sm" for="validatedCustomFile">Update picture...</label>
                                        <div>
                                            <button class="btn btn-primary btn-sm my-2" type="submit">Upload</button>
                                        </div>
                                    </div>
                                </form>
                                <ul class="mt-4">
                                    <li>
                                        <a href="{% url 'register:user' profile_id=logged_user.id %}" class="text-dark">
                                            <strong>{{ logged_user.friends.all.count }}</strong>
                                        </a>
                                        <span>friends</span>
                                    </li>
                                    <li>
                                        <strong>{{ logged_user.user.project_set.all.count }}</strong>
                                        <span>projects</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-12">
                    <div class="social-box" style="">
                        <ul class="mt-3">
                            <li><span>Company: <a href="">{{ logged_user.company }}</a></span></li>
                            <li><span>Projects:
                                    {% for project in logged_user.user.project_set.all %}
                                        <a href="">{{ project.name }},</a>
                                    {% endfor %}
                                </span>
                            </li>
                        </ul>
                        <ul>
                            <li><span>Name: <a href="">{{ logged_user.user.get_full_name }}</a></span></li>
                            <li><span>e-mail: <span class="text-blue text-lowercase">{{ logged_user.user.email }}</span></span>
                            </li>
                        </ul>
                        <ul>
                            <li><span>Date joined: <span class="text-blue">{{ logged_user.user.date_joined }}</span></span></li>
                            <li><span>Last login: <span class="text-blue">{{ logged_user.user.last_login }}</span></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}